<template>
  <div class="lease">
    <van-popup v-model="show" closeable  round  class="col-xs-10 col-sm-6 col-md-5" >
      <van-field/>
      <van-cell-group>
        <van-field label="租赁者" :value="dangeLeaseInfo.name" readonly/>
        <van-field label="租赁时间" :value="dangeLeaseInfo.zlsj" readonly />
        <van-field label="服务器IP" :value="dangeLeaseInfo.ip" readonly />
        <van-field label="联系方式" :value="dangeLeaseInfo.lxfs" readonly />
        <van-field label="租赁备注" :value="dangeLeaseInfo.zlbz" readonly />
      </van-cell-group>
      <div class="text-center">
        <van-button type="info" style="margin:10px 10px 10px 0" @click="lease_edit(dangeLeaseInfo)">编辑</van-button>
        <van-button type="danger" style="margin:10px 0 10px 10px" @click="lease_finish(dangeLeaseInfo.lease_id)">结算</van-button>
      </div>
    </van-popup>
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <th>用户名</th>
        <th>服务器IP</th>
        <th>租赁时间</th>
        <th>联系方式</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="v in leaseAll">
        <td>{{v.name}}</td>
        <td>{{v.ip}}</td>
        <td>{{v.zlsj}}</td>
        <td>{{v.lxfs}}</td>
        <td style="padding-top: 0;padding-bottom:0;vertical-align: middle"><van-button type="info" @click.prevent="longlongsee(v)" size="mini">查看</van-button></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import utils from "@/utils/time"
import qs from 'qs'
import {finishServerLease, getServerLeaseUnfinish} from "../../utils/api";
export default {
  name: "ServerLease",
  data(){
    return {
      leaseAll:[],
      dangeLeaseInfo:[],
      show:false
    }
  },
  methods:{
    longlongsee(v){
      this.show=true;
      this.dangeLeaseInfo=v;
    },
    lease_edit(v){
      this.$router.push({name:"lease_edit",params:{valuse:v}});
    },
    lease_finish(v){
      finishServerLease(qs.stringify({id:v})).then(respose=>{
        if(respose.status===200){
          this.$toast.success("结算成功");
          this.show=false;
          this.leaseAll=this.leaseAll.filter((item)=>{
            return item.lease_id!==v;
          })
        }else{
          this.$toast.fail("删除失败");
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  },
  created() {
    getServerLeaseUnfinish().then(respose=>{
      if(respose.status==200){
        this.leaseAll=respose?.body;
        this.leaseAll.map((item)=>{
          item.zlsj = utils.timestampToTime(item.zlsj,5);
        })
      }
    }).catch(error=>{
      console.log(error);
    })
  }
}
</script>

<style scoped>

</style>
